<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate></v-progress-linear>
        <v-container
            :style="{ backgroundImage: `url(${register_logo})` }"
            style="
                height: 160px;
                background-size: cover;
            "
        >
        </v-container>
        <v-container class="white rounded-lg mt-n6 pa-8">
            <v-card elevation="4" class="py-4">
                <v-row dense class="mt-2">
                    <v-col cols="12" class="px-8 text-center">
                        <h4 class="subtitle-1">我的邀请码</h4>
                    </v-col>
                    <v-col cols="12" class="px-8 text-center">
                        <h4 class="subtitle-1">{{ invate_code }}</h4>
                    </v-col>
                </v-row>
                <v-img :src="qrcode" class="mb-4"></v-img>
                <v-row>
                    <v-col cols="12" class="px-8">
                        <v-btn
                            block
                            rounded
                            large
                            outlined
                            color="primary"
                            @click="copy(share_link)"
                            >复制我的邀请链接</v-btn
                        >
                    </v-col>
                    <v-col cols="12" class="px-8">
                        <v-btn
                            block
                            rounded
                            large
                            elevation="0"
                            color="primary"
                            :loading="downloading"
                            @click="downloadImg"
                            >保存到手机</v-btn
                        >
                    </v-col>
                </v-row>
            </v-card>
        </v-container>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from "vuex";
import QRCode from "qrcode";

export default {
    data: () => ({
        register_logo: '',
        invate_code: "",
        qrcode: "",
        share_link: "",
        loading: false,
        downloading: false,
    }),
    computed: {
        ...mapGetters(["uid"]),
    },
    created() {
        this.loadQr();
        this.load();
    },
    methods: {
        loadQr() {
            axios.get(`/v1/home`).then((response) => {
                this.register_logo = response.data.data.register_logo;
            })
        },
        downloadImg() {
            const that = this;
            that.downloading = true;
            axios
                .post(`/v1/user/invite-image`, { qr: this.qrcode })
                .then((response) => {
                    const downloadUrl = response.data.data;
                    var a = document.createElement("a");
                    // safari doesn't support this yet
                    if (typeof a.download === "undefined") {
                        window.location.href = downloadUrl;
                    } else {
                        a.href = downloadUrl;
                        a.download = "my-share.png";
                        document.body.appendChild(a);
                        a.click();
                    }

                    setTimeout(() => a.remove(), 10000);
                })
                .catch(function () {})
                .then(function () {
                    that.downloading = false;
                });
        },
        load() {
            this.loading = true;
            const that = this;
            axios
                .get(`/v1/user/invite-code`)
                .then((response) => {
                    if (response.data.code == 0) {
                        that.invate_code = response.data.data.code;
                        that.share_link =
                            window.location.origin +
                            window.location.pathname +
                            that.$router.resolve({
                                name: "index",
                                query: { code: that.invate_code },
                            }).href;
                        QRCode.toDataURL(that.share_link)
                            .then((url) => {
                                that.qrcode = url;
                            })
                            .catch((err) => {
                                that.$toasted.show("二维码生成失败", {
                                    type: "error",
                                });
                                console.error(err);
                            });
                    } else {
                        that.$toasted.show("二维码生成失败", { type: "error" });
                    }
                })
                .catch(function () {})
                .then(function () {
                    that.loading = false;
                });
        },
    },
};
</script>

<style lang="scss">
.border-left-red {
    border-left: 3px solid #ba2b39;
}

.grid-btn .v-btn .v-btn__content {
    flex-direction: column-reverse;
    height: inherit;
}

div.bg-curved {
    position: absolute;
    overflow: hidden;
    height: 180px;
    width: 100%;
}

div.bg-curved::before {
    background-color: #ba2b39;
    border-radius: 100%;
    position: absolute;
    right: -200px;
    left: -200px;
    top: -200px;
    content: "";
    bottom: 0;
}

.theme--light.half-transparent.v-text-field--solo
    > .v-input__control
    > .v-input__slot {
    background-color: rgb(255 255 255 / 71%);
}
</style>
